<div class="category">
  <!-- 左侧树形目录区域 -->
  <div class="category-tree">
    <!-- 1.先介绍一下zTree -->
    <!-- 1.zTree树形结构(在demo里拷贝过来) 去index.html里面引入zTree的css和js-->
    <ul id="category-tree" class="ztree"></ul>
  </div>

  <!-- 右侧区域 -->
  <div class="category-content">
    <!-- 按钮操作区域 -->
    <div class="category-option">
      <!-- 新增按钮 -->
      <button type="button" class="btn btn-primary">新增</button>
      <!-- 批量删除按钮 -->
      <button type="button" class="btn btn-danger">批量删除</button>
    </div>

    <!-- 表格区域 -->
    <div class="category-table">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>编号</th>
            <th>栏目名称</th>
            <th>父级栏目</th>
            <th>描述</th>
            <th>操作</th>
          </tr>
        </thead>
      </table>
      <!-- 最开始写的时候就是一个表格 不要分开 后面分开是为了让表头固定 表列滑动 -->
      <div class="category-table-content">
        <table class="table table-bordered">
          <tbody>
            <!-- 没有进行到ajax请求数据获取节点时现在这里写，请求数据时把这里剪切放到下面去 -->
            <!-- 
                  <tr>
                    <td><input type="checkbox" value=""></td>
                    <td>栏目名称</td>
                    <td>父级栏目</td>
                    <td>描述</td>
                    <td>
                      搜索delete，pencil
                      删除按钮
                      <i class="fa fa-trash-o" aria-hidden="true" title="删除"></i>
                      修改按钮
                      <i class="fa fa-pencil-square-o" aria-hidden="true" title="修改"></i>
                    </td>
                  </tr> 
                -->
          </tbody>
        </table>
      </div>

    </div>
  </div>
</div>

<script>
  // 先输出一下 看jQuery是否生效
  // console.log($('.category'));

  // 执行函数 获取数据
  findAllCategory()
  // 获取栏目数据 遍历数据 插入节点 生成表格
  function findAllCategory() {
    // 每次添加节点之前，先清空节点
    $('.category tbody').empty()
    // 使用封装的ajax请求对应接口获取数据
    myAjax('/manager/category/findAllCategory', 'get', {}, function (res) {
      // 1.显示数据在表格中
      console.log(res);
      // 遍历拿到的数据 res.data 所有的栏目数据
      res.data.forEach(function (item) {
        // 这里使用``(数字键1旁边的符号 这个符号的字符串可以换行)
        // 把上面tbody里的数据直接剪切下来
        // !!! 想里面插入值的时候  使用 `+ (要匹配的值) +`
        var $str = $(`
          <tr>
            <td><input type="checkbox" value="`+item.id+`"></td>
            <td>`+ item.name +`</td>
            // !!! 数据里面有的有parent 有的没有parent 我们要进行一个判断 加()
            <td>`+ (item.parent ? item.parent.name : '--') +`</td>
            <td>`+ item.comment +`</td>
            <td>
              <i class="fa fa-trash-o" aria-hidden="true" title="删除"></i>
              <i class="fa fa-pencil-square-o" aria-hidden="true" title="修改"></i>
            </td>
          </tr>
        `)
        // 追加到tbody中
        $('.category tbody').append($str)

        // 我们发现 我们的数据会超出我们所设置的内容区域 所以我们去样式里修改一下 减去option和外边距10px 去css里面.category-table设置

        // 然后我们还想让表头固定不动 表列滚动 回到上面分割thead 和 tbody 
      })

      // 2.将数据显示在树形结构中 因为我们要根据zTree的数据格式去处理 所以我们要把后台返回的数据进一步的进行处理
      // res.data = [{},{},{}] 后台返回来的数据内部存放的是栏目对象
      // result = [{},{},{}] 我们需要的是内部存放父栏目对象，父栏目对象有children属性里面放的是子栏目数组

      // 1-过滤出所有的父栏目 如果parent为null 就是父栏目
      var parent = res.data.filter(function (item) {
        // 返回item没有parent属性的
        return !item.parent
      })
      // console.log(parent);
      // 我们拿到了父栏目以后，开始对子栏目进行一个规整
      // 遍历parent，拿到每一个父栏目的id，在res.data数组中找到对应的子栏目，放到父栏目对象的children数组中
      parent.forEach(function (item) {
        // item.id 父栏目id
        // 取到所有的栏目对象 再次进行筛选 将结果放到item.children里(全部写完再加item.children)
        item.children = res.data.filter(function (catrgoryItem) {
          // catrgoryItem 每一个栏目对象
          // 因为有的栏目对象为父栏目 所以他的parent对象为null 所以我们要先判断一下
          if (catrgoryItem.parent) {
            return catrgoryItem.parent.id == item.id
          }else{
            return false
          }
        })
      })
      // 打印parent看下结果
      console.log(parent);
      // 到此 我们规整完毕
      // zTree的初始化 把arr替换成parent
      // 设置第一个父栏目默认展开
      parent[0].open = true
      $.fn.zTree.init($("#category-tree"), {
        view: {
          showIcon: false
        }
      }, parent);
    },
    function (error) {
      console.log(error);
    })
  }
  // 先展示静态的 根据这个结构  删除拷贝过来的结构
  // zTree树形结构配置 现在这里写静态 处理数据剪切到上面
  // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
  // var arr = [
  //   {
  //     name: "test1", 
  //     open: true, 
  //     children: [
  //       { name: "test1_1" }, 
  //       { name: "test1_2" }
  //     ]
  //   },
  //   {
  //     name: "test2", open: true, children: [
  //       { name: "test2_1" }, { name: "test2_2" }]
  //   }
  // ];
  // $.fn.zTree.init($("#category-tree"), {
  //   view: {
  //     showIcon: false
  //   }
  // }, arr);
</script>